<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body,
			html,
			#bottom {
				width: 100%;
				height: 100%;
			}
			
			body {
				display: flex;
				align-items: flex-end;
			}
			
			#bottom {
				height: 60px;
				justify-content: space-around;
				background: white;
				border-top: 1px solid #eee;
			}
			
			#bottom>div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				color: #9cacc9;
			}
			
			#bottom img {
				width: 28px;
				height: 28px;
			}
			
			#mask {
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				display: none;
				z-index: 100;
				background: rgba(0, 0, 0, .9);
			}
		</style>
	</head>

	<body>
		<!--加载动画-->
		<div id="mask"></div>
		<!--加载动画-->
		<div id="bottom" class='dis-spa'>
			<div @tap="toggle('index')">
				<img :src="who=='index'?'img/index-active.svg':'img/index.svg'" />
				<span :style="{'color':who=='index'?'#0c61ff':''}">钱包</span>
			</div>
			<div @tap="toggle('index1')">
				<img :src="who=='index1'?'img/index1-active.svg':'img/index1.svg'" />
				<span :style="{'color':who=='index1'?'#0c61ff':''}">OTC</span>
			</div>
			<div @tap="toggle('index2')">
				<img :src="who=='index2'?'img/index2-active.svg':'img/index2.svg'" />
				<span :style="{'color':who=='index2'?'#0c61ff':''}">DAPP</span>
			</div>
			<div @tap="toggle('index3')">
				<img :src="who=='index3'?'img/index3-active.svg':'img/index3.svg'" />
				<span :style="{'color':who=='index3'?'#0c61ff':''}">闪兑</span>
			</div>
			<div @tap="toggle('index4')">
				<img :src="who=='index4'?'img/index4-active.svg':'img/index4.svg'" />
				<span :style="{'color':who=='index4'?'#0c61ff':''}">我的</span>
			</div>
		</div>

		<script src="js/comm.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var openJia = function() {
				document.getElementById('mask').style.display = 'block';
			};
			var closeJia = function() {
				document.getElementById('mask').style.display = 'none';
			};
			mui.init();

			var first = null;

			mui.back = function() {
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					plus.nativeUI.toast("再按一次退出程序");
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
			var appBottom = new Vue({
				el: '#bottom',
				data: {
					who: 'index',
					jiazai: false,
				},
				watch: {
					jiazai: function(val) {
						console.log(val)
					}
				},
				methods: {
					toggle: function(font) {
						this.who = font;
						switch(font) {
							case 'index':
								var index = plus.webview.getLaunchWebview() || plus.webview.getWebviewById('index');
								index.show();
								break;
							case 'index1':
								var index1 = plus.webview.getWebviewById('index1');
								index1.show();
								break;
							case 'index2':
								var index2 = plus.webview.getWebviewById('index2');
								index2.show();
								break;
							case 'index3':
								var index3 = plus.webview.getWebviewById('index3');
								index3.show();
								break;
							case 'index4':
								var index4 = plus.webview.getWebviewById('index4');
								index4.show();
								break;
						}
					}
				}
			});
		</script>
	</body>

</html>